<template>
    <div class="jd-find">
        <!-- 左边 -->
        <div class="left">
            <van-sidebar v-model="active">
                <van-sidebar-item v-for="(li,idx) in listArr" :class='active==idx?"on":""' :key="li._id" :title="li.cate_zh" />
            </van-sidebar>
        </div>
        <!-- 右边 -->
        <div class="right">
            <van-grid :column-num="3">
                <van-grid-item 
                    v-for="ls in cache[active]" 
                    :key="ls._id"
                    :text="ls.name" >
                    <template #icon>
                        <img class="icon" :src="$img.baseUrl+ls.img" alt="">
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
        <Tabbar/>
    </div>
</template>
<script>
import {Tabbar} from '@/components/'
import{
    Sidebar, 
    SidebarItem,
    Grid,
    GridItem}
    from 'vant'
import {mapActions,mapState,mapMutations} from 'vuex'
export default {
   data() {
      return {
          active:0,
          listArr:[],
      }
   },
   components:{
       [Sidebar.name]:Sidebar,
       [SidebarItem.name]:SidebarItem,
       [Grid.name]:Grid,
       [GridItem.name]:GridItem,
       Tabbar
   },
   //由于变成动态组件所以要改变周期
   activated(){
       this.$http.fetchCatesLists().then(res=>{
        //    console.log(res.list);
           this.listArr=res.list
           this.init()
       })
   },
   watch:{
       active(){
           //判断缓存里面是否存在点击的这个，不存在才调接口
           if(!this.cache[this.active]){
               this.init()
           }
       }
   },
   deactivated(){
       //在组件销毁之前，清除缓存
       this.clearCache()
   },
   computed:{
       ...mapState('good',['cache']),
   },
   methods:{
       ...mapMutations('good',['clearCache']),
       ...mapActions('good',['getCache']),
       init(){
           const cate=this.listArr[this.active].cate
           console.log(cate);
           this.getCache({idx:this.active,cate})
       }
   },
}
</script>
<style lang="scss" scoped>
.jd-find{
    position: relative;
    height: 100%;
    overflow: hidden;
    .left{
        position: absolute;
        height: 100%;
        width: 2.266667rem;
        top: 0;
        left: 0;
        overflow: auto;
    }
    .right{
        position: absolute;
        height: 100%;
        left: 2.266667rem;
        right: 0;
        top: 0;
        overflow: auto;
        padding-top: 1.8rem;
    }
    .van-sidebar{
        width: 100%;
        margin-bottom: 1.233333rem;
    }
    .van-sidebar-item--select::before{
        background-color: transparent;
    }
    .van-sidebar-item.on{
        color: #e93b3d;
    }
    .van-sidebar-item{
        text-align: center;
        background-color: #f8f8f8;
        padding: .426667rem .32rem;
    }
    .icon{
        width: 1.866667rem;
        height: 1.866667rem;
    }
    .van-grid-item{
        width: 2.213333rem;
        height: 2.853333rem;
    }
}
</style>
